/**
/*所有元素都有这个属性*/
/*{
    box-sizing: border-box;
}*/


body
{
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /*text-align: center;*/
     /*文本居中，适用于inline-block*/
    flex-direction: column;
    background-image:url(q.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    
}


#board1
{
    
    border:solid 5px black;
    border-collapse: collapse;
    /*折叠*/
    /*width:720px;*/
}
#board1 td
{
    border:solid 2px black;
}
td
{
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: center;
    /*垂直对其方式*/
}
#outline
{
    /*margin-top: 100px;*/
    border:solid 5px black;
    padding:10px;
    /*内间距*/
    /*min-width: 0;
    最小宽度为0*/
    display: inline-block;
    /*行内块元素*/

}
#board2 
{
    /*border:solid 2px red;*/
    border-collapse: collapse;
    position: absolute;
    /*width: 760px;
    top:100px;
    left: 50%;
    transform: translateX(-50%);*/
    table-layout: fixed;
    /*保证td不变形*/

}
#board2 td
{
   
    border:solid 2px rgba(0,0,0,0);

}
[chess=black]:before  
{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: black;
    content: "";
    border-radius: 50%;
}
[chess=white]:before  
{
    display: inline-block;
    /*行内块标签*/
    width: 30px;
    height: 30px;
    background-color: white;
    content: "";
    border-radius: 50%;
    border:solid 1px black;
}
#control
{
    position: absolute;
    width:50%;
    top: 20px;
    text-align: center;
    /*margin: 0 auto;*/

    
   
}
.left
{
    float:left;
}
.right
{
    float: right;
}
button
{
    border:none;
    background-color: darkcyan;
    border-radius:5px;
    height:40px;
    color:black;
    cursor:pointer;
    /*鼠标样式*/
    
}
#round
{
    font-size: 30px;
}